<template>
	<div style="margin-left: 5px;">

     <div>
		<div>
				<el-row >
				 <h3 style="display:inline-block">{{Data.CodeNum}}.</h3> 	<span v-html="Data.Title" style="display:inline-block"></span>
                    <el-button   @click="divvisibility(1)" type="text"  style="float:right" v-if="!preview">{{see}}</el-button>
				</el-row>
				<div class="option-area" style="margin: 5px;"  v-if="visible">
                     <el-alert v-if="HasError"  title="比重总值已经超出设置!" type="error"  effect="dark">  </el-alert>
                     <span v-if='(Data.TotalValue-AssignedValue)!=0'>未分配{{Data.TotalValue-AssignedValue}}</span>
                     <el-table :data="Data.Options" style="width: 100%" >
                     <el-table-column prop="itemName" label="选项" />
                        <el-table-column label="比重">
                         <template slot-scope="scope">
                             <table style="width:100%">
                                 <tr>
                                     <td>
                                          <el-slider show-input   style="margin-left:10px" @change="assignValue(scope.row.itemId)" :max="Data.TotalValue"  input-size="mini"  v-model="scope.row.ItemValue"></el-slider>
                                     </td>
                                 </tr>
                             </table>
                           
                         </template>
                        </el-table-column>
                      
                    </el-table>
                    
				</div>
                
			</div>
       
	</div>
    
    <div id='editor' v-if='canEdit==true' style="margin: 5px;">
     <el-card class="box-card" style="margin-top:20px" >
  	    <EditorComponent v-model="Data.Title"  :Html="Data.Title" />
		 <table class='setting-table ' >
                                <tr>
                                     <td> 
                                           <el-input placeholder="请输入内容" v-model="Data.TotalValue">
                                             <template slot="prepend">比重总值</template>
                                            </el-input>
                                     </td>
                                     <td>     
									 <el-input placeholder="请输入内容" v-model="Data.Unit">
                                             <template slot="prepend">比重单位</template>
                                     </el-input>
                                    </td>
                                    <td>
                                      
                                    <td>
                                     <td >  
                                          
                                     </td>
                                      <td>  
                                         
                                     </td>
                                </tr>
          </table>
      
	 <el-table :fit="true" :data="Data.Options" style="width: 100%">
         
      <el-table-column  label="选项文字" >
		   <template slot-scope="scope">
			   <div id='title-row' >
				   <el-input size="small" style='display: inline-block;'  v-model="scope.row.itemName" placeholder="请输入内容"></el-input>
			   </div>
			</template>
	  </el-table-column>

		<el-table-column  label="操作"  >
				  <template slot-scope="scope">
						<div style='display: inline-block;margin-top: 5px;'>
							<el-button type="warning" @click="remove(scope.row.itemId)" size="mini" style='display: inline-block;' icon="el-icon-minus" circle></el-button>
							<el-button type="danger"  @click="insert(scope.row.itemId)" size="mini" style='display: inline-block;'  icon="el-icon-plus" circle></el-button>
							<el-button  size="mini" style='display: inline-block;' @click='moveUp(scope.row.itemId)' icon="el-icon-top" circle></el-button>
							<el-button  size="mini" style='display: inline-block;' @click='moveDown(scope.row.itemId)' icon="el-icon-bottom" circle></el-button>
						</div>
				 </template>
		</el-table-column>

	    <el-table-column  label="说明"  >
			  <template slot-scope="scope">
			 <el-input v-model="scope.row.memo" size="small" placeholder="请输入内容"></el-input>
			 </template>
	    </el-table-column>

		


    </el-table>
          <button @click="getanswer">answer</button>
	      <BatchAddComponent v-model="msg" @getitem="itemNameArry" :itemnamearry="itemname" ></BatchAddComponent>
	     <el-button type="warning " style='margin-top:5px;width:100%' @click="canEdit=false">完成编辑</el-button>
	    </el-card>
		 </div>
		
	</div>
</template>

<script lang='ts'>
  
    import {Component, Vue, Watch, Prop } from 'vue-property-decorator'
    import ProportionSubject,{ProportionOption} from './ts/ProportionSubject'
 
    import TBaseQuestion from './ts/TBaseQuestion'

    import EditorComponent from './EditorComponent.vue'
 
    import BatchAddComponent from './BatchAddComponent.vue';
    import {QuestionTypes}from"./ts/QuestionDataTypes";
 @Component(
     {
         components:{EditorComponent,BatchAddComponent}
     }
 )

 //比重分配题组件
	export  default class ProportionComponent  extends TBaseQuestion<ProportionOption,ProportionSubject> {


      $name:string= 'ProportionComponent'
       

      CheckedValues:Array<string>=[];
      //已分配值
      AssignedValue:number=0;
      HasError:boolean=false;
      QuestionType=0;
      itemname="";

      see="显示";
      visible=false;

      options:ProportionOption[]=[];
	  msg:string ="";
	  gotMsg:string[]=[];
      
	   @Watch('msg')
	    getstr(){
			console.log(this.msg);
			this.gotMsg=this.msg.split('\n')
			this.gotMsg.forEach(element => {
			  if(element!=" "){
			    var opt =new ProportionOption();
			    opt.itemName=element;
			    this.options.push(opt);
			  }
		    });
		    this.Data.Options=this.options;
			this.options=[];
			
       }
       itemNameArry(){
            this.itemname=this.getOptionText();
        }

	   //显示题目内容div
        // divvisibility(){
        //     this.visible=!this.visible;
        //     if(this.see==="显示"){
        //         this.see="隐藏";
        //     }else{
        //         this.see="显示";
        //     }
        // }

	   //获取options中每一项的name
	    getOptionText():string{
			let options="";
			let n=this.Data.Options.length;
			for(let i=0;i<n;i++){
				if(i<(n-1)){
					options+=this.Data.Options[i].itemName+"\n";
				}else{
                    options+=this.Data.Options[i].itemName;
				}
			}
			return options;
			
		}
      constructor ()
      {
     
        super(ProportionOption,ProportionSubject);
        this.Data.QuestionType=QuestionTypes.qtProportion;
        this.Data.Title="设置题目标题";

        for(var i:number=0;i<5;++i)
          {
              var opt = new ProportionOption();
              opt.itemName='选项'+i;
              this.Data.Options.push(opt);
          }
          
         
      }

       mounted()
    {
         super.mounted();
         this.initProps();
         console.info("component mounted!");
    }
    //分配值
      assignValue(id:string)
      {
      
        var index= this.Data.Options.findIndex(item=>item.itemId===id);
        var item=this.Data.Options[index];
        this.AssignedValue=0;
        for(var lt of this.Data.Options)
        {
            this.AssignedValue+=lt.ItemValue;
        }

          console.info("assigned value:"+this.AssignedValue+" itemValue:"+item.ItemValue);
        if(this.AssignedValue>this.Data.TotalValue)
        {
            
            //item.ItemValue=0;
           // item.ItemValue=0;
            this.Data.Options[index].ItemValue=0;
            this.AssignedValue=this.Data.TotalValue;

            this.HasError=true;
        }
        else
        {
            this.HasError=false;
        }
        
      }
     
     //输入框内容改变
	   inputchange(){
		   this.msg=this.getOptionText();
	   }
	//删除选项
	remove(str:string):void{
		super.remove(str);
		this.msg=this.getOptionText();
	}
	 //插入选项
    insert(id:string):void
    {
        let options= this.Data.Options;
        options.splice(options.findIndex(item=>item.itemId===id)+1,0,this.createNewOption(ProportionOption));
        this.msg=this.getOptionText();
        
    };
	//向上移动选项
	moveUp(id:string):void{
		super.moveUp(id);
		this.msg=this.getOptionText();
	}
	moveDown(id:string){
		super.moveDown(id);
		this.msg=this.getOptionText();
	}

      initOptions()
      {
           for(var i:number=0;i<5;++i)
          {
              var opt = new ProportionOption();
              opt.itemName='选项'+i;
              this.Data.Options.push( opt);
          }

      }

    
     getQuestionData():any
     {
         return this.Data;
     }

     setQuestionData(data:string)
     {
           
     };

     getTitle():void
     {
        // console.info(Data.Title);
         // this.Data.Title;
	 }
     
     
     getMaxSel():number
     {
         return this.Data.Options.length;
     }

	 setTitle(txt:string):void
	 {
		
     }
     
    GetHtml(html:string):void
     {
         this.Data.Title=html;
     }

    getanswer(id:string):object[]{
       
        return this.Data.answer;
    }
}
</script>
 
<style>
.optionLayout{
                display: flex;
                display: -webkit-flex;
                border: 1px solid gainsboro;
                
                width: 100%;
                align-items:center;
                justify-content:left;
            }
.setting-table td{  text-align: center;vertical-align:middle;} table{ width: 100%;font-size: 14px;margin-top: 5px}

</style>
